<template>
  <div class="box1">
    <div class="bgBlock">
      <el-divider content-position="left"><h2>基本信息</h2></el-divider>
      <div class="fontInfo">
        <p style="width: 25%">
          任务名称：<span>{{ data.taskName }} </span>
        </p>
        <p style="width: 25%">
          任务描述：<span>{{ data.desc }} </span>
        </p>
        <p style="width: 25%">
          任务源：<span v-if="data.start && data.start"
            >{{ data.start }}<i class="el-icon-right"></i>{{ data.end }}
          </span>
        </p>
      </div>
    </div>
    <div class="bgBlock">
      <el-divider content-position="left"><h2>数据源信息</h2></el-divider>
      <div class="fontInfo">
        <p style="width: 40%">
          数据库名称：<span>{{ data.databaseName || "空" }} </span>
        </p>
        <p style="width: 40%">
          数据库主机名：<span>{{ dbData && dbData.ip }} </span>
        </p>
        <p style="width: 40%">
          数据库端口：<span>{{ dbData && dbData.port }} </span>
        </p>
        <p style="width: 40%">
          数据库用户名称：<span>{{ dbData && dbData.uname }} </span>
        </p>
      </div>
    </div>
    <div class="bgBlock">
      <el-divider content-position="left"><h2>评估配置</h2></el-divider>
      <div class="fontInfo">
        <p style="width: 100%">
          获取评估对象的方式：<span
            >{{ data.taskWay == "1" ? "选择评估对象" : "评估指定类型的对象" }}
          </span>
        </p>
        <p style="width: 100%">
          统计表信息：<span
            >{{ data.taskCount.length > 0 ? countmodeInfo : "空" }}
          </span>
        </p>
        <p style="width: 100%">
          指定模式：<span>{{ getModeText }} </span>
        </p>
      </div>
    </div>
    <div class="bgBlock">
      <el-divider content-position="left"><h2>评估指定对象</h2></el-divider>
      <div class="fontInfo">
        <el-table
          ref="multipleTable"
          :data="taskTables"
          tooltip-effect="dark"
          style="width: 100%; margin-top: 15px"
          :height="taskTables.length > 5 ? '350px' : ''"
          border
        >
          <el-table-column label="库名称" width="200" prop="schema" />
          <el-table-column prop="table" label="对象名称" width="220" />
          <el-table-column prop="classfiy" label="表名称" />
        </el-table>
      </div>
    </div>
    <div class="radioBox">
      <p>
        创建后运行模式：
        <el-radio-group v-model="data.strategy">
          <el-radio
            v-for="dict in dict.type.task_strategy"
            :key="dict.value"
            :label="dict.value"
            >{{ dict.label }}</el-radio
          >
        </el-radio-group>
      </p>
    </div>
  </div>
</template>
<script>
import { listDatasourceInfo } from "@/api/console/datasourceInfo.js";
import Vue from "vue";

export default {
  components: {},
  props: ["data"],
  dicts: ["task_strategy"],
  data() {
    return {
      countmodeInfo: [],
      taskmodeInfo: [],
      taskTables: [],
      dbData: {},
    };
  },
  async created() {
    let that = this;
    let { taskMode, taskCount, taskTables } = that.$props.data;
    this.$emit("getTaskMode", this.taskmodeInfo);
    let res = await this.getDicts("appraise_countmode");
    if (!this.$props.data.strategy) {
      Vue.set(this.$props.data, "strategy", "2");
    }
    // this.taskTables = taskTables || [];
    res.data.forEach((f, i) => {
      if (taskCount.includes(f.dictValue)) {
        this.countmodeInfo.push(f.dictLabel);
      }
    });
    this.countmodeInfo = this.countmodeInfo.join("，");
    if (taskTables.length > 0) {
      taskTables.forEach((f) => {
        this.taskTables.push({
          schema: f.schema,
          classfiy: f.classfiy,
          table: f.name ? f.name : f.table,
        });
      });
    }
  },
  async mounted() {
    let that = this;
    const dictItem = await this.getDicts("database_datatype");
    const example = dictItem.data.filter((f) => f.dictLabel == "实例");
    const data = {
      type: that.$props.data.start,
      dataType: example[0].dictValue,
      startNum: 0,
      pgSize: 999,
    };
    let res = await listDatasourceInfo(data);
    res = res.rows.find((f) => f.id == this.$props.data.databaseId);
    this.dbData = res;
  },
  computed: {
    getModeText() {
      let _v = [];
      const mode = this.$props.data.jobType;
      this.taskmodeInfo.forEach((f) => {
        if (mode == f.value) {
          _v.push(f.text);
        }
      });
      return _v.join(",");
    },
  },
  methods: {
    onSubmit() {},
    connectMode(v, j) {
      const arr = [];
      v.forEach((f) => {
        if (j.includes(f.value)) {
          return arr.push(f.label);
        }
      });
      return arr;
    },
  },
};
</script>

<style lang="scss" scoped>
.box1 {
  margin: 40px auto;
  .bgBlock {
    border: 1px solid #dcdfe6;
    width: 100%;
    margin: 20px 0;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px 1px #f8f8f8;
  }

  h2 {
    font-weight: 700;
    font-size: 20px;
    color: rgb(64, 158, 255);
  }

  span {
    font-weight: 500;
    font-size: 16px;
  }

  .fontInfo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 10px;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    // justify-content: space-between;
    font-size: 16px;
    p {
      width: 25%;
    }
  }

  .radioBox {
    text-align: right;
    font-weight: 700;

    p {
      margin-bottom: 0;
    }
  }
}

.el-col-1 {
  margin-top: 5px !important;
}
</style>
